<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表页</title>
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/product-list.css">

</head>

<body>
    <div id="headerWrap">
        <div id="moveHeader">
            <div class="moveHeader">
                【年中盛典】买指定高光/粉底液/散粉/蜜粉享双头刷<br>
                买尤雾弹享喷雾+粉底液体验礼<br>
                买指定唇膏享卸妆油6ml*2体验礼<a href="">更多惊喜查看详情</a>
                <i class="iconfont icon-fork removeHeader"></i>
            </div>
        </div>
        <div id="headerNav">
            <h1 class="logo"><a href=""><img src="https://www.maccosmetics.com.cn/media/dev/global/site-logo.svg"
                        alt=""></a></h1>
            <ul class="firstNav">
                <li>
                    <a href=""> 人气口红爆品</a>
                </li>
                <li>
                    <a href="">年中盛典</a>
                </li>
                <li class="show-sn">
                    <a href="">新品推荐</a>
                    <ul class="secondNav">
                        <li><a href="">粉金大理石</a></li>
                        <li><a href="">王者限定</a></li>
                        <li><a href="">龙雾弹唇膏</a></li>
                        <li><a href="">定制无暇柔光散粉</a></li>
                    </ul>
                </li>
                <li class="show-sn">
                    <a href="">全部产品</a>
                    <ul class="secondNav">
                        <li class="show-tn">
                            <a href="">人气推荐</a>
                            <ul>
                                <li>新品有有雾弹</li>
                                <li>明星粉底液</li>
                                <li>子弹头断货王</li>
                            </ul>
                        </li>
                        <li class="show-tn">
                            <a href="">彩妆</a>
                            <div class="thirdMenu">
                                <ul>
                                    <li><a href=""></a><strong>唇部</strong></li>
                                    <li><a href="">唇膏</a></li>
                                    <li><a href="">唇膏</a></li>
                                    <li><a href="">唇膏</a></li>
                                    <li><a href="">唇膏</a></li>
                                </ul>
                                <ul>
                                    <li><a href=""></a><strong>唇部</strong></li>
                                    <li><a href="">唇膏</a></li>
                                    <li><a href="">唇膏</a></li>
                                    <li><a href="">唇膏</a></li>
                                    <li><a href="">唇膏</a></li>
                                </ul>
                                <ul>
                                    <li><a href=""></a><strong>唇部</strong></li>
                                    <li><a href="">唇膏</a></li>
                                    <li><a href="">唇膏</a></li>
                                    <li><a href="">唇膏</a></li>
                                    <li><a href="">唇膏</a></li>
                                </ul>
                                <ul class="navImg">
                                    <a href=""><img
                                            src="https://www.maccosmetics.com.cn/media/export/cms/Touts/GNAV_0000_Prime+Prep_US.jpg"
                                            alt=""></a>
                                    <a href=""><img
                                            src="https://www.maccosmetics.com.cn/media/export/cms/Touts/GNAV_0002_PRO_US_CA.jpg"
                                            alt=""></a>
                                </ul>
                            </div>
                        </li>
                        <li class="show-tn">
                            <a href="">妆前</a>
                            <div>
                                <ul>
                                    <li><a href="">妆前</a></li>
                                    <li><a href="">bb霜和cc霜</a></li>
                                </ul>
                                <ul>
                                    <li><a href=""> <img
                                                src="https://www.maccosmetics.com.cn/media/export/cms/Touts/GNAV_0000_Prime+Prep_US.jpg"
                                                alt=""></a></li>
                                </ul>

                            </div>
                        </li>
                        <li class="show-tn">
                            <a href="">护肤</a>
                            <div>
                                <ul>
                                    <li><a href="">妆前</a></li>
                                    <li><a href="">bb霜和cc霜</a></li>
                                </ul>
                                <ul>
                                    <li><a href=""> <img
                                                src="https://www.maccosmetics.com.cn/media/export/cms/Touts/GNAV_0000_Prime+Prep_US.jpg"
                                                alt=""></a></li>
                                </ul>

                            </div>
                        </li>
                        <li class="show-tn">
                            <a href="">刷子和工具</a>
                            <div>
                                <ul>
                                    <li><a href="">妆前</a></li>
                                    <li><a href="">bb霜和cc霜</a></li>
                                    <li><a href="">唇膏</a></li>

                                </ul>
                                <ul>
                                    <li><a href="">唇膏</a></li>
                                    <li><a href="">口红</a></li>
                                    <li><a href="">唇膏</a></li>
                                    <li><a href="">唇膏</a></li>
                                </ul>

                            </div>
                        </li>
                    </ul>
                </li>
                <li>
                    <span class="more">更多<i class="iconfont icon-xialacaidanjiantou"></i></span>
                    <ul class="more-menu">
                        <li><a href="">门店专柜</a></li>
                        <li><a href="">唇妆视频</a> </li>
                    </ul>
                </li>
            </ul>
            <div class="search">
                <i class="iconfont icon-magnifier"></i>
                <div class="search-con">
                    <input type="text" placeholder="输入搜索词">
                    <i class="iconfont icon-fork icon-fork-search"></i>
                </div>
            </div>
            <div class="email">
                <i class="iconfont icon-youxiang"></i>
                <p>电子邮箱期刊 注册!</p>
            </div>
            <div class="sign">
                <div class="sign-show">
                    <p>MY M·A·C </p>
                    <p>用户登录</p>
                </div>

                <div class="signIn">
                    <div>
                        <h3>用户登录</h3>
                        <i class="iconfont removeSignin icon-fork removeHeader"></i>
                    </div>
                    <div class="signUp">
                        <span>没有账号？</span>
                        <a href="http://127.0.0.1:5500/page/signIn.html">注册</a>
                    </div>
                    <input type="text" placeholder="电子邮箱" name="username">
                    <input type="password" placeholder="密码" name="password">
                    <a href="">忘记密码</a>
                    <div class="submit">提交</div>
                </div>

            </div>
            <div class="navCar">
                <i class="iconfont icon-gouwuche2"></i>
                <span>我的购物车</span>
            </div>
        </div>

    </div>
    <div id="mainWrap">
        <div class="bannerWrap">
            <div class="banner">
                <a href=""><img
                        src="https://www.maccosmetics.com.cn/media/export/cms/mpp_ambient_headers/powder_kiss_mpppc_1280x220_200529.jpg"
                        alt=""></a>
            </div>
        </div>
        <div class="main-top">
            <span>买尤雾弹享控妆水2.5ml体验礼+粉底液体验礼*2</span><br>
            <span>买指定唇膏享卸妆油6ml*2体验礼</span><br>
            <span>买指定高光/散粉/蜜粉/粉底液享双头刷，粉底液加享泵头</span><br>
            <span>买控妆水享控妆水30ml体验礼 买小眼影享卸妆油6ml体验礼</span><br>
            <span>买指定眼影盘享大理石眼影刷</span><br>
            <span>（限定商品不参与此活动）</span><br>
            <span>*赠品数量有限 赠完即止</span><br>
        </div>
        <div class="type">
            <span><a href="http://127.0.0.1:5500/page/product-list.html"> 新品尤雾弹唇膏</a></span>
            <span><a href="http://127.0.0.1:5500/page/product-list.html">经典子弹头唇膏</a></span>
            <span><a href="http://127.0.0.1:5500/page/product-list.html">粉金大理石子弹头</a></span>
        </div>
        <div class="type-show">
            <div class="show-top">
                <h3>新品尤雾弹唇膏</h3>
                <span>轻烟柔雾 哑而不干</span>
            </div>
            <div class="list-show clear_fix showF">
                <!-- <div class="list-connect">
                    <h4>魅可丝缎柔雾唇膏</h4>
                    <b>POWDER KISS LIPSTICK</b>
                    <p>色号： 316 DEVOTED TO CHILI 柔雾小辣椒</p>
                    <a href=""><img src="https://www.maccosmetics.com.cn/media/export/cms/products/280x320/mac_sku_S4K031_280x320_0.jpg" alt=""></a>
                    <div class="list-bottom">
                        <span>￥170</span>
                        <div class="btn">加入购物车</div>
                    </div>
                </div> -->
            </div>
            <div class="show-top">
                <h3>经典子弹头唇膏</h3>
                <span>人气子弹头 潮色势不可挡</span>
            </div>
            <div class="list-show clear_fix showS">
                <!-- <div class="list-connect">
                    <h4>魅可丝缎柔雾唇膏</h4>
                    <b>POWDER KISS LIPSTICK</b>
                    <p>色号： 316 DEVOTED TO CHILI 柔雾小辣椒</p>
                    <a href=""><img src="https://www.maccosmetics.com.cn/media/export/cms/products/280x320/mac_sku_S4K031_280x320_0.jpg" alt=""></a>
                    <div class="list-bottom">
                        <span>170</span>
                        <div class="btn">加入购物车</div>
                    </div>
                </div> -->
            </div>
            <div class="show-top">
                <h3>粉金大理石子弹头</h3>
            </div>
            <div class="list-show clear_fix showT"> 
                <!-- <div class="list-connect">
                    <h4>魅可丝缎柔雾唇膏</h4>
                    <b>POWDER KISS LIPSTICK</b>
                    <p>色号： 316 DEVOTED TO CHILI 柔雾小辣椒</p>
                    <a href=""><img src="https://www.maccosmetics.com.cn/media/export/cms/products/280x320/mac_sku_S4K031_280x320_0.jpg" alt=""></a>
                    <div class="list-bottom">
                        <span>170</span>
                        <div class="btn">加入购物车</div>
                    </div>
                </div> -->
            </div> 
        </div>
    </div>
    <div id="footerWrapp">
        <div class="footer">
            <div class="store">
                <h3><a href="">门店地址</a></h3>
                <p><a href="">查找门店</a></p>
                <p><a href="">魅可定制美妆</a></p>
            </div>
            <div class="service">
                <h3><a href="">客户服务</a></h3>
                <p><a href="">联系我们</a></p>
                <p><a href="">官方商城服务热线:</a></p>
                <p><a href="">400-802-9566</a></p>
                <p><a href="">专柜客户关怀服务热线:</a></p>
                <p><a href="">400-801-1308</a></p>
                <p><a href="">常见问题</a></p>
                <p><a href="">订单情况</a></p>
                <p><a href="">运输信息</a></p>
                <p><a href="">退换政策</a></p>
            </div>
            <div class="aboutus">
                <h3><a href="">关于我们</a></h3>
                <p><a href="">品牌故事</a></p>
                <p><a href="">艾滋病基金会</a></p>
                <p><a href="">M·A·C魅可官网购物五大理由</a></p>
                <p><a href="">M·A·C魅可专业会员</a></p>
                <h3 class="ardess"><a href="">公司地址</a></h3>
                <p><a href="">上海市静安区 延安中路1228号静安嘉里<br>中心三座11楼</a></p>
            </div>
            <div class="account">
                <h3><a href="">账户</a></h3>
                <p><a href="">账户</a></p>
                <p><a href="">订单状态</a></p>
                <p><a href="">我的收藏</a></p>
            </div>
            <div class="footer-link">
                <h3><a href="">链接</a></h3>
                <div class="piclink">
                    <a href=""><img src="https://www.maccosmetics.com.cn/media/export/cms/icon_wechat_mac.png"
                            alt=""></a>
                    <a href=""><img src="https://www.maccosmetics.com.cn/media/export/cms/miniprogram.png" alt=""></a>
                    <a href=""><img src="https://www.maccosmetics.com.cn/media/export/cms/icon_weibo_mac.png"
                            alt=""></a>

                </div>
                <p><a href=""><img src="https://www.maccosmetics.com.cn/media/images/global/trustmark_logo.png"
                            alt=""></a></p>
            </div>

        </div>


    </div>
    <!-- 底部 -->
    <div id="bottomWrap">
        <div class="bottom">
            <a href="">隐私保护</a>
            <a href="">条件条款</a>
            <a href="">产品真伪鉴别</a>
            <a href="">© MAKE-UP ART COSMETICS. ALL WORLDWIDE RIGHTS RESERVED.</a>
            <a href="">沪ICP备08005263号</a>
            <a href="">上海工商</a>
            <a href="">沪公网安备 31010602004728号</a>
            <a href=""><img src="https://www.maccosmetics.com.cn/media/export/cms/gongan.png" alt=""></a>
        </div>
    </div>
    <!-- 在线咨询弹出框 Online consultation -->
    <div class="online">
        <a href=""><img src="https://livechat.esteelauder.com.cn/siteimage.htm?d=www.maccosmetics.com.cn&imagetype=6"
                alt=""></a>
    </div>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/swiper.min.js"></script>

<script src="../js/index.js"></script>
<script src="../js/cookie.js"></script>
<script src="../js/product-list.js"></script>
<!-- <script src="../js/addData.js"></script> -->

</html>